import 'package:flutter/material.dart';

class ButtonDemo extends StatelessWidget {
  const ButtonDemo({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final Widget flatButtonDemo = Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        FlatButton(
          onPressed: (){
          }, 
          child: Text('Button'),
          splashColor: Colors.grey,
          textColor: Theme.of(context).accentColor,
        ),
        FlatButton.icon(
          onPressed: (){
          }, 
          label: Text('Button'),
          icon: Icon(Icons.add),
          splashColor: Colors.grey,
          textColor: Theme.of(context).accentColor,
        )
      ],
    );

    final Widget raiseButtonDemo = Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Theme(
          data: Theme.of(context).copyWith(
            buttonColor: Theme.of(context).accentColor,
            buttonTheme: ButtonThemeData(
              textTheme: ButtonTextTheme.primary,
              // shape: BeveledRectangleBorder(
              //   borderRadius: BorderRadius.circular(16.0)
              // ),
              shape:StadiumBorder()
            )
          ),
          child: RaisedButton.icon(
            onPressed: (){},
            label: Text('Raise'),
            icon: Icon(Icons.sd_card),    
            elevation: 12.0,
            color: Colors.tealAccent,
            textColor: Colors.white          
          ),
        ),
      ],
    );

    final Widget outlineButtonDemo = Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Theme(
          data: Theme.of(context).copyWith(
            buttonColor: Theme.of(context).accentColor,
            buttonTheme: ButtonThemeData(
              textTheme: ButtonTextTheme.primary,
              shape: StadiumBorder()
            )
          ),
          child: OutlineButton.icon(
            onPressed: (){}, 
            icon: Icon(Icons.ac_unit_outlined), 
            label: Text('outline'),
            splashColor: Colors.red,
            borderSide: BorderSide(
              color: Colors.black
            ),
            textColor: Colors.green,
          ),
        ),
      ]
    );

    final Widget containerButtonDemo = Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children:<Widget>[
        Container(
          width: 160.0,
          child: OutlineButton.icon(
            onPressed: (){}, 
            icon: Icon(Icons.ac_unit_outlined), 
            label: Text('outline'),
            splashColor: Colors.red,
            borderSide: BorderSide(
              color: Colors.black
            ),
            textColor: Colors.green,
          ),
        )
      ]
    );

    final expandedButtonDemo = Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children:<Widget>[
        Expanded(
          child: OutlineButton.icon(
            onPressed: (){}, 
            icon: Icon(Icons.ac_unit_outlined), 
            label: Text('outline'),
            splashColor: Colors.red,
            borderSide: BorderSide(
              color: Colors.black
            ),
            textColor: Colors.green,
          ),
        ),
        SizedBox(width:16.0),
        Expanded(
          flex: 2,
          child: OutlineButton.icon(
            onPressed: (){}, 
            icon: Icon(Icons.ac_unit_outlined), 
            label: Text('outline'),
            splashColor: Colors.red,
            borderSide: BorderSide(
              color: Colors.black
            ),
            textColor: Colors.green,
          ),
        )
      ]
    );

    return Scaffold(
      appBar: AppBar(
        title: Text('ButtonDemo'),
        elevation: 0.0
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            flatButtonDemo,
            raiseButtonDemo,
            outlineButtonDemo,
            containerButtonDemo,
            expandedButtonDemo,
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Theme(
                  data: Theme.of(context).copyWith(
                    buttonTheme: ButtonThemeData(
                      padding: EdgeInsets.symmetric(horizontal:60.0)
                    )
                  ), 
                  child: ButtonBar(
                    children: <Widget>[
                      OutlineButton.icon(
                        onPressed: (){}, 
                        icon: Icon(Icons.ac_unit_outlined), 
                        label: Text('outline'),
                        splashColor: Colors.red,
                        borderSide: BorderSide(
                          color: Colors.black
                        ),
                        textColor: Colors.green,
                      ),
                      OutlineButton.icon(
                        onPressed: (){}, 
                        icon: Icon(Icons.ac_unit_outlined), 
                        label: Text('outline'),
                        splashColor: Colors.red,
                        borderSide: BorderSide(
                          color: Colors.black
                        ),
                        textColor: Colors.green,
                      ),
                    ],
                  )
                ) 
              ]
            )
          ],
        )
      )
    );
  }
}

class WidgetDemo extends StatelessWidget {
  const WidgetDemo({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WidgetDemo'),
        elevation: 0.0
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
              ],
            )
          ],
        )
      )
    );
  }
}


class FloatButtonDemo extends StatelessWidget {


  const FloatButtonDemo({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    final Widget _floatingActionButton = FloatingActionButton(
      onPressed: (){},
      child: Icon(Icons.add,color: Colors.white,),
      elevation: 0.0,
      backgroundColor: Colors.black87,
      // shape: BeveledRectangleBorder(
      //   borderRadius: BorderRadius.circular(30.0)
      // ),
    );

    final Widget _floatingActionButtonExtended = FloatingActionButton.extended(
      onPressed: (){},
      label: Text('Add'),
      icon:  Icon(Icons.add)
    );

    return Scaffold(
      appBar: AppBar(
        title: Text('floatActionButtonDemo'),
        elevation: 0.0,
      ),
      floatingActionButton: _floatingActionButton,
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        child: Container(
          height: 80.0,
        ),
        shape: CircularNotchedRectangle(),
      ),
    );
  }
}

class PopupMenuButtonDemo extends StatefulWidget {
  PopupMenuButtonDemo({Key key}) : super(key: key);

  @override
  _PopupMenuButtonDemoState createState() => _PopupMenuButtonDemoState();
}

class _PopupMenuButtonDemoState extends State<PopupMenuButtonDemo> {
  String _currentModeText = 'Home';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PopuoMenuButtonDemo'),
        elevation: 0.0
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('$_currentModeText'),
                PopupMenuButton(
                  onSelected: (value){
                    debugPrint('213 $value');
                    setState(() {
                      _currentModeText = value;
                    });
                  },
                  itemBuilder: (BuildContext context)=>[
                    PopupMenuItem(
                      value: 'Home',
                      child: Text('Home')
                    ),
                    PopupMenuItem(
                      value: 'Content',
                      child: Text('Content')
                    ),
                    PopupMenuItem(
                      value: 'Mine',
                      child: Text('Mine')
                    )
                  ])
              ],
            )
          ],
        )
      ),
    );
  }
}